<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态生成表格</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            position: relative;
            top: 10px;
            text-align: center;
        }

        /* table{margin-top: 10px;position: absolute;left: 30%;} */
        table {
            margin: 10px auto;
        }

        #tb tr td {
            width: 100px;
            height: 30px;
        }
    </style>
    <script>
        window.onload = function () {
            var row = document.getElementById('row');
            var col = document.getElementById('col');
            var btn = document.getElementById('btn');
            var tb = document.getElementById('tb');
            tb.onclick = function (ev) {
                var e = ev || window.event;
                var target = e.target || window.event.srcElement;
                if (target.nodeName.toLowerCase() === 'button') {
                    console.log(target.parentNode.parentNode)
                    tb.removeChild(target.parentNode.parentNode);
                }
            }
            btn.onclick = function () {
                if (!row.value || !col.value) {
                    alert("请填写行和列的值！");
                }
                for (let i = 0; i < row.value; i++) {
                    var tr = document.createElement('tr');
                    for (let j = 0; j < col.value; j++) {
                        var td = document.createElement('td');
                        tr.appendChild(td);
                    }
                    //添加删除按钮
                    var deleteBtn = document.createElement('td');
                    deleteBtn.innerHTML = "<button>删除</button>";
                    tr.appendChild(deleteBtn);
                    tb.appendChild(tr);
                }
            }

        }
    </script>
</head>

<body>
    <div>
        <input type="text" placeholder="行" id="row">
        <input type="text" placeholder="列" id="col">
        <button id="btn">生成</button>
        <table border="1" id="tb">
        </table>
    </div>
</body>

</html>